<script setup lang="ts">
import { createUserInstance } from '@/api/code';
import { getImageList, getInstanceList } from '@/api/docker';
import { Image, Instance, UserContainer } from '@/api/docker/type';
import { useUserStore } from '@/store/user';
import { CascaderOption } from 'vant';
import { onMounted, Ref, ref } from 'vue';

const show = defineModel() as Ref<boolean>;
const instanceList = ref([] as Instance[]);
const cascaderValue = ref();
const options = ref([] as CascaderOption[]);
const container = ref({} as UserContainer);
const onCreate = () => {
    const userStore = useUserStore();
    const userId = userStore.getId;
    createUserInstance(container.value.instanceId, container.value.imageId, userId);
}
const onFinish = ({selectedOptions}: { value: string | number, selectedOptions: CascaderOption[], tabIndex: number }) => {
    container.value.instanceId = selectedOptions[0].value as string;
    container.value.imageId = selectedOptions[1].value as string;
}

onMounted(async () => {
    const res = await getInstanceList();
    instanceList.value = res.data as Instance[];
    instanceList.value.forEach(async i => {
        const res = await getImageList(i.id);
        const imageList = res.data as Image[];
        let option = {
            text: i.id,
            value: i.id,
            children: [] as CascaderOption[]
        }
        imageList.forEach((j) => {
            option.children.push({
                text: j.repoTags[0],
                value: j.id
            })
        })
        options.value.push(option);
    })
})


</script>
confirm
<template>
    <div>
        <van-dialog v-model:show="show" show-cancel-button @confirm="onCreate">
            <van-cascader
                v-model="cascaderValue"
                title="请选择你的实例"
                :options="options"
                @finish="onFinish"
            />
        </van-dialog>
    </div>
</template>

<style lang="scss" scoped>

</style>